<template>
  <el-card class="box-card">
    <el-form ref="form" v-loading="loading" :model="form" class="tab-inner" label-width="130px">
      <el-tabs v-model="activeName">
        <el-tab-pane label="博客设置" name="blog">
        </el-tab-pane>
        <el-tab-pane label="评论设置" name="comment">
          <el-form-item label="启用评论">
            <el-switch v-model="form.comment.enableComment" active-text="启用" />
          </el-form-item>
          <el-form-item v-if="form.comment.enableComment">
            <el-row>
              <el-col :span="13">
                <el-checkbox v-model="form.comment.showCommentCount">显示评论数</el-checkbox>
                <el-checkbox v-model="form.comment.enableSupportOppose">启用顶踩</el-checkbox>
                <el-checkbox v-model="form.comment.showLowCommentOnLoad">二级回复在页面加载的时候就显示</el-checkbox>
                <el-checkbox v-model="form.comment.allowAnonymousComment">允许匿名用户评论</el-checkbox>
                <el-checkbox v-model="form.comment.createdStatusIsSuccess">创建评论无需审核</el-checkbox>
                <el-input v-model="form.comment.maxCommentLength" size="mini" placeholder="长度">
                  <template slot="prepend">评论最多输入</template>
                  <template slot="append">个字符</template>
                </el-input>
              </el-col>
            </el-row>
          </el-form-item>
        </el-tab-pane>
      </el-tabs>
      <el-divider />
      <el-form-item>
        <el-button type="primary" :loading="isSubmitLoading" @click="save">保存</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script>
import { getSettings, updateSettings } from "@/api/settings/blogging";

export default {
  name: 'BlogSettings',
  data() {
    return {
      activeName: 'blog',
      loading: true,
      isSubmitLoading: false,
      form: {
        blog: {},
        comment: {
          enableComment: true,
          showCommentCount: true,
          enableSupportOppose: true,
          showLowCommentOnLoad: true,
          allowAnonymousComment: true,
          createdStatusIsSuccess: true,
          maxCommentLength: 140
        }
      }
    };
  },
  mounted() {
    this.load();
  },
  methods: {
    load() {
      getSettings().then(result => {
        this.form = result;

        this.loading = false;
        this.$nextTick(() => {
          this.$refs["form"].clearValidate();
        });
      });
    },
    save() {
      this.isSubmitLoading = true;
      this.$refs["form"].validate(valid => {
        if (!valid) {
          this.isSubmitLoading = false;
          this.$message({ message: this.$t("formIsNotValidMessage"), type: "warning" });
          return;
        }

        updateSettings(this.form)
          .then(() => {
            this.$message({ message: "保存成功", type: "success" });
            this.isSubmitLoading = false; // 无论成功失败，都把按钮的loading状态取消
          })
          .finally(() => {
            this.isSubmitLoading = false; // 无论成功失败，都把按钮的loading状态取消
          });
      });
    }
  }
};
</script>
<style scoped>
.el-checkbox {
  display: block;
}
</style>
